<template>
  <section class="todoapp">
    <todo-header @handleAddList="handleAddList"></todo-header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <todo-main
      :list="list"
      @handleDeleteList="handleDeleteList"
      @handleChangeList="handleChangeList"
      @wholeChangeList="wholeChangeList"
    ></todo-main>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <todo-footer
      :list="list"
      @wholeDeleteList="wholeDeleteList"
      @changeListShow="changeListShow"
    ></todo-footer>
  </section>
</template>
<script>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  data() {
    return {
      list: [
        { id: 12, name: "吃饭", isDone: false, flag: "1" },
        { id: 14, name: "听歌", isDone: true, flag: "1" },
        { id: 23, name: "洗澡", isDone: true, flag: "1" },
        { id: 34, name: "睡觉", isDone: false, flag: "1" },
        { id: 35, name: "游戏", isDone: false, flag: "1" },
      ],
    };
  },
  methods: {
    handleDeleteList(id) {
      this.list = this.list.filter((item) => item.id != id);
    },
    handleChangeList(id, done) {
      this.list.find((item) => item.id === id).isDone = done;
    },
    handleAddList(list) {
      this.list.unshift({
        id: +new Date(),
        name: list,
        isDone: false,
        flag: "1",
      });
    },
    wholeDeleteList() {
      this.list = this.list.filter((item) => {
        return !item.isDone || !item.flag;
      });
    },
    wholeChangeList(allChecked) {
      this.list.map((item) => {
        if (!item.flag) return;
        item.isDone = allChecked;
      });
    },
    changeListShow(flag) {
      this.list.forEach((item) => {
        if (item.isDone != flag || flag === 2) {
          item.flag = 1;
        } else {
          item.flag = 0;
        }
      });
    },
  },
};
</script>

<style></style>
